<div class="layui-form seller-form"  action="" >
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">存酒手机：</label>
            <div class="layui-input-inline seller-inline-3">
                <input type="text" name="mobile"  placeholder="请输入存酒手机" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">存酒编号：</label>
            <div class="layui-input-inline seller-inline-3">
                <input type="text" name="liquor_bn"  placeholder="请输入存酒编号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm"  lay-submit lay-filter="payments-search"><i class="iconfont icon-chaxun"></i>筛选</button>
            <button type="button" class="layui-btn layui-btn-sm add-liquor"><i class="layui-icon">&#xe608;</i> 存酒</button>
        </div>
    </div>
</div>
<div class="table-body">
        <div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title" id="tab">
        <li class="layui-this" data-types="deposit">未取出</li>
        <li data-types="">所有存酒</li>
    </ul>
    </div>
    <table id="paymentsSellerTable" lay-filter="paymentsSellerTable"></table>
</div>
<script>
    layui.use(['table','form','layer', 'laydate'], function(){
        let lock = false;
        var table = layui.table,form = layui.form,layer = layui.layer;
        var type='deposit'
        //第一个实例
        table.render({
            elem: '#paymentsSellerTable', //指定原始表格元素选择器（推荐id选择器）
            height: 'full-260',
            cellMinWidth: '80',
            page:true,
            limit:70,
            id:'paymentsSellerTable',
            url: "{:url('api')}",
            where: {status: type},
            cols: [[ //表头
                {type:'numbers'},
                {field: 'liquor_bn',title:'存酒编号',align:'center',width:100},
                {field: 'nickname',title: '存酒人',align:'center',minWidth:150, templet: function(data){
                    return '<span>'+data.user.nickname+'</span>'; 
                }},
                {field: 'mobile', title: '存酒电话',align:'center',width:120},
                {field: 'goods_name', title: '商品名称',align:'center',minWidth:150},
                {field: 'number', title: '数量',align:'center',width:100},
                {field: 'status', title: '状态',align:'center',width:100,templet: function(data){
                    switch(data.status){
                        case 'expire':
                            return '<span>已过期</span>';
                        case 'took':
                            return '<span>已取出</span>';
                        case 'deposit':
                            return '<span>待取出</span>'; 
                        case 'cancel':
                            return '<span>已取消</span>'; 
                    }
                }},
                {field: 'ctime', title: '存酒时间',align:'center',width:170, templet: function(data){
                    var timestamp4 = new Date(data.ctime*1000);
                    return timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8); 
                }},
                {field: 'memo', title: '备注',align:'center', width:150},
                {fixed: 'right', width:170,title:'操作', align:'center', toolbar: '#payments'}
            ]]
        });
        
        $(document).on('click','.add-liquor',function(){
            JsGet("{:url('add')}", function(e){
                window.box = layer.open({
                    type: 1,
                    content: e,
                    area: ['450px', '500px'],
                    title:'添加预约'
                });
            })
        });


        form.on('submit(add-liquor)', function(data){
            JsPost("{:url('save')}", data.field, function(res){
                if(res.status){
                    layer.close(window.box);
                    layer.msg(res.msg,{time:1300},function(){
                        table.reload('paymentsSellerTable');
                    });
                }else{
                    layer.msg(res.msg);
                }
            })
        });

        form.on('submit(payments-search)', function(data){
            table.reload('paymentsSellerTable', {
                where: data.field
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        $('#tab li').click(function() {
            type = $(this).data('types');
            table.reload('paymentsSellerTable', {
                where: {status: type}
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })



        //监听表单提交  (edit)
        form.on('submit(edit-booking)', function(data){
            $.ajax({
                url:"{:url('update')}",
                type:'post',
                data: data.field,
                success:function(res){
                    if(res.status == true){
                        layer.close(window.box);
                        layer.msg(res.msg, {time:1300},function(){
                            table.reload('paymentsSellerTable');
                        });
                    }else{
                        layer.msg(res.msg);
                    }
                }
            },'json');
        });


        //监听 操作状态
        form.on('switch(status)', function(obj){
            JsPost("{:url('Payments/changeStatus')}",{id:this.value,status:obj.elem.checked},function(res){
                layer.msg(res.msg);
            });
        });


        //监听工具条
        table.on('tool(paymentsSellerTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'edit') { //编辑
                JsGet("{:url('edit')}?id=" + data.id, function(e){
                    window.box = layer.open({
                        type:1,
                        content:e,
                        area:['450px','500px'],
                        title:'编辑存酒'
                    })
                })
            }else if(layEvent == 'cancel'){
                layer.confirm('真的要取消吗',{icon: 3,title:'提示'}, function(){
                    JsPost("{:url('cancel')}",{id: data.id}, function(res) {
                        if(res.status){
                            layer.msg(res.msg,{time:1300},function(){
                                table.reload('paymentsSellerTable');
                            });
                        }else{
                            layer.msg(res.msg);
                        }
                    });
                })
            }
        });
    });
</script>

<script type="text/html" id="status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="payments">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cancel">取消</a>
</script>